{% extends "base.html" %}

{% block content %}
<div class="card">
    <h2><i class="fas fa-chart-line"></i> 学习进度追踪</h2>
    <p>查看您的学习进展和知识掌握情况。</p>
    
    <div class="progress-section">
        <h3>总体进度</h3>
        <div class="progress-bar">
            <div class="progress" style="width: 60%;"></div>
        </div>
        <p>已完成60%的学习路径</p>
    </div>
    
    <div class="progress-section">
        <h3>知识领域掌握情况</h3>
        <ul class="topic-list">
            <li>解剖学: <span class="progress-percent">85%</span></li>
            <li>生理学: <span class="progress-percent">75%</span></li>
            <li>病理学: <span class="progress-percent">60%</span></li>
            <li>药理学: <span class="progress-percent">45%</span></li>
            <li>临床医学: <span class="progress-percent">30%</span></li>
        </ul>
    </div>
    
    <div class="progress-section">
        <h3>需要加强的知识点</h3>
        <ul class="topic-list">
            {% for area in user_data.weak_areas %}
            <li>{{ area }}</li>
            {% else %}
            <li>暂无需要特别加强的知识点</li>
            {% endfor %}
        </ul>
    </div>
    
    <div class="progress-section">
        <h3>最近测试记录</h3>
        <table style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr>
                    <th style="text-align: left; padding: 8px; border-bottom: 1px solid #ddd;">日期</th>
                    <th style="text-align: left; padding: 8px; border-bottom: 1px solid #ddd;">测试类型</th>
                    <th style="text-align: left; padding: 8px; border-bottom: 1px solid #ddd;">得分</th>
                </tr>
            </thead>
            <tbody>
                {% for test in user_data.test_history %}
                <tr>
                    <td style="padding: 8px; border-bottom: 1px solid #ddd;">{{ test.date }}</td>
                    <td style="padding: 8px; border-bottom: 1px solid #ddd;">{{ test.type }}</td>
                    <td style="padding: 8px; border-bottom: 1px solid #ddd;">{{ test.score }}</td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="3" style="padding: 8px; text-align: center;">暂无测试记录</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}